<template>
    <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="app-nav-bar"
      title="注册"
      left-arrow
      @click-left="$router.push('/my')"
    />
    <!-- /导航栏 -->

    <!-- 注册表单 -->
    <van-form @submit="onRegister" 
    :show-error="false"
    :show-error-message="false"
    ref="login-form"
  @failed="onFailed"> 

      <van-field
        v-model="user.account" 
        required
        label="账号"
        placeholder="请输入账号"
        name="account" 
        :rules="[{ required: true, message: '请输入账号', trigger: 'onBlur' }]"/>

        <van-field
        v-model="user.user_name"
        required
        label="用户名昵称"
        placeholder="请输入用户名昵称"
        name="user_name" 
        :rules="[{ required: true, message: '请输入用户名昵称', trigger: 'onBlur' }]"/>

      <van-field
        v-model="user.password"
        required clearable
        type="password"
        label="密码"
        placeholder="请输入密码"
        name="password" 
        :rules="[{ required: true, message: '请输入密码', trigger: 'onBlur' }]"/>

        <van-field
        v-model="user.phonenumber"
        required clearable
        label="手机号"
        type="tel"
        placeholder="请输入手机号"
        name="phonenumber" :rules="telRules" />

        <van-field
        v-model="user.department"
        required
        label="单位"
        placeholder="请输入单位"
        name="department" 
        :rules="[{ required: true, message: '请输入单位名称', trigger: 'onBlur' }]"/>

       <div class="login-btn-wrap">
      <van-button class="login-btn" type="danger"  block>确认</van-button>

     
    </div>
    <!-- /注册表单 -->
    </van-form>
</div>
</template>

<script>
import { addUser } from '@/api/user'
export default {
  name: 'register',
  components: {},
  props: {},
  data () {
    return {
      user: {
        account: '', // 账号
        user_name:'', // 用户昵称
        password: '', // 密码
        phonenumber:'', //手机号
        department:'',//单位
      },
      // 校验手机号码
      telRules: [{
        required: true,
        message: '手机号码不能为空',
        trigger: 'onBlur'
      }, {
        // 自定义校验规则
        validator: value => {
          return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
            .test(value)
        },
        message: '请输入正确格式的手机号码',
        trigger: 'onBlur'
      }],

    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
      async onRegister() {
          // 开始转圈圈
          this.$toast.loading({
              duration: 0, // 持续时间，0表示持续展示不停止
              forbidClick: true, // 是否禁止背景点击
              message: '注册中...' // 提示消息
          })
          try {
              if (!/^[a-zA-Z]\w{5,17}$/.test(this.user.password)) {
                  this.$toast.fail('请输入正确的密码格式 提示：以字母开头，长度在6~18之间，只能包含字母、数字和下划线');
                  this.user.password = "";
                  return false;
              }

              const { data } = await addUser(this.user)
              if (data.code != 200) {
                  this.$toast.fail('注册失败！' + data.msg);
              }
              else {
                  this.$toast.success('注册成功');
                  this.$router.push('/my');
              }
          } catch (err) {
              if (err.response.status === 400) {
                //  console.log('注册失败！', err);
                  this.$toast.fail('注册失败！');
              }
          }
      },

      onFailed(error) {
          if (error.errors[0]) {
              this.$toast({
                  message: error.errors[0].message, // 提示消息
                  position: 'top' // 防止手机键盘太高看不见提示消息
              })
          }
      }
  }
}

</script>

<style scoped lang="less">
.login-container {
  .login-btn-wrap {
    padding: 26px 16px;
    .login-btn {
      border: none;
      .van-button__text {
        font-size: 15px;
      }
    }
  }
}
</style>